<worklenz-rpt-header [title]="'项目时间表'" [showExport]="true" [isPngOnly]="true"
           (isDurationLabelSelected)="isDurationLabelSelected = $event"
           (exportFile)="export()"></worklenz-rpt-header>

<nz-content>
  <nz-card [nzLoading]="loading" [nzTitle]="projectsTitle">
  <ng-template #projectsTitle>
    <nz-space>
    <button *nzSpaceItem [nzDropdownMenu]="teamsSelector" [nzClickHide]="false" [nzLoading]="loadingTeams"
        [nzTrigger]="'click'" nz-button nz-dropdown>
      团队
      <span nz-icon nzType="caret-down"></span>
    </button>
    <button *nzSpaceItem [nzDropdownMenu]="categorySelector" [nzClickHide]="false" [nzLoading]="loadingCategories"
        [nzTrigger]="'click'" nz-button nz-dropdown>
      类别
      <span nz-icon nzType="caret-down"></span>
    </button>
    <button *nzSpaceItem [nzDropdownMenu]="projectsSelector" [nzClickHide]="false" [nzLoading]="loadingProjects"
        [nzTrigger]="'click'" nz-button nz-dropdown>
      项目
      <span nz-icon nzType="caret-down"></span>
    </button>
    </nz-space>
  </ng-template>

  <div *ngIf="projects.length" class="position-relative" >
    <div class="chartWrapper">
    <div class="chartAreaWrapper"
       [style.height]="chartHeight+'px'"
       [style.width]="chartWidth+'px'">
      <canvas baseChart
          [data]="barChartData"
          [options]="barChartOptions"
          [legend]="false"
          [type]="'bar'" id="chart-view" #exportChartCanvas>
      </canvas>
    </div>
    </div>
  </div>

  <nz-empty *ngIf="!projects.length"></nz-empty>

  </nz-card>
</nz-content>

<worklenz-project-logs-breakdown
  [show]="showLogsModal"
  [isDurationLabelSelected]="isDurationLabelSelected"
  (onClose)="showLogsModal = false; selectedProject = null"
  [project]="selectedProject"></worklenz-project-logs-breakdown>

<nz-dropdown-menu #teamsSelector="nzDropdownMenu">
  <ul class="pt-0" style="max-height: 330px; overflow-y: auto;" nz-menu>
  <li class="px-3 py-2 sticky-top bg-white">
    <input [(ngModel)]="teamSearchText" (ngModelChange)="detectChanges()" type="text"
       placeholder="按团队名称搜索" nz-input #teamSearchInput>
  </li>
  <li
    class="m-0 align-items-baseline"
    [(nzChecked)]="selectAllTeams"
    (nzCheckedChange)="selectAllTeamsChecked($event)"
    nz-checkbox nz-menu-item>全选
  </li>
  <li nz-menu-divider></li>
  <li *ngFor="let item of teamsDropdown | searchByName: teamSearchInput.value" class="m-0 align-items-baseline"
    [(nzChecked)]="item.selected"
    (nzCheckedChange)="checkTeam()"
    nz-checkbox nz-menu-item>
    {{item.name}}
  </li>
  </ul>
</nz-dropdown-menu>

<nz-dropdown-menu #categorySelector="nzDropdownMenu">
  <ul class="pt-0" nz-menu style="max-height: 330px;overflow-y: auto;">
  <li class="px-3 py-2 sticky-top bg-white">
    <input [(ngModel)]="categorySearchText" (ngModelChange)="detectChanges()" type="text"
       placeholder="按类别名称搜索" nz-input #categorySearchInput>
  </li>
  <li
    class="m-0 align-items-baseline"
    [(nzChecked)]="selectAllCategories"
    (nzCheckedChange)="selectAllCategoriesChecked($event)"
    nz-checkbox nz-menu-item>全选
  </li>
  <li nz-menu-divider></li>
  <li class="m-0 align-items-baseline" [(nzChecked)]="selectNoCategory" (nzCheckedChange)="checkCategory()" nz-checkbox nz-menu-item>
    无类别
  </li>
  <li *ngFor="let item of categoriesDropdown | searchByName: categorySearchInput.value"
    [(nzChecked)]="item.selected" (nzCheckedChange)="checkCategory()" class="m-0 align-items-baseline" nz-checkbox
    nz-menu-item>
    <div class="d-flex align-items-center justify-content-center user-select-none">
    <div>
      <span class="d-block">
      <nz-badge [nzColor]="item.color_code" [nzText]="item.name"></nz-badge>
      </span>
    </div>
    </div>
  </li>
  </ul>
</nz-dropdown-menu>

<nz-dropdown-menu #projectsSelector="nzDropdownMenu">
  <ul class="pt-0" nz-menu style="max-height: 330px;overflow-y: auto;">
  <li class="px-3 py-2 sticky-top bg-white">
    <input [(ngModel)]="projectSearchText" (ngModelChange)="detectChanges()" type="text"
       placeholder="按项目名称搜索" nz-input #projectSearchInput>
  </li>
  <li
    class="m-0 align-items-baseline"
    [(nzChecked)]="selectAllProjects"
    (nzCheckedChange)="selectAllProjectsChecked($event)"
    nz-checkbox nz-menu-item>全选
  </li>
  <li nz-menu-divider></li>
  <li *ngFor="let item of projectsDropdown | searchByName: projectSearchInput.value"
    [(nzChecked)]="item.selected" (nzCheckedChange)="checkProject()" class="m-0 align-items-baseline" nz-checkbox
    nz-menu-item>
    <div class="d-flex align-items-center justify-content-center user-select-none">
    <div>
      <span class="d-block" nz-typography>{{item.name}}</span>
    </div>
    </div>
  </li>
  </ul>
</nz-dropdown-menu>
